<template>
  <div class="group-profile-info" v-if="isGroupProfileInfoVisible">
    <el-dialog :visible.sync="isGroupProfileInfoVisible" width="500px" :before-close="handleClose">
      <div class="group-profile-info-header">
        <el-radio-group v-model="active" size="small"  @change="reset">
          <el-radio-button label="group-profile">群资料</el-radio-button>
          <el-radio-button label="group-card">群名片</el-radio-button>
          <el-radio-button v-if="isAdmin" label="group-management">群管理</el-radio-button>
        </el-radio-group>
      </div>
      <div class="group-profile-info-content">
        <el-form v-show="active !== activeName.GROUP_MANAGEMENT" :model="groupProfile" ref="groupProfile" label-width="15%" size="mini">
          <div v-show="active === activeName.GROUP_PROFILE">
            <div v-show="!isEditGroupProfile" class="group-profile-info-avatar">
              <Avatar :src="groupProfile.avatar" :type="TIM.TYPES.CONV_GROUP"></Avatar>
            </div>
            <el-form-item label="群头像" v-show="isEditGroupProfile">
              <el-input placeholder="请输入图片地址" v-model="groupProfile.avatar" maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="群名称">
              <span v-show="!isEditGroupProfile">{{ groupProfile.name }}</span>
              <el-input v-show="isEditGroupProfile" v-model="groupProfile.name" maxlength="10" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="群简介">
              <span v-show="!isEditGroupProfile">{{ groupProfile.introduction || '无' }}</span>
              <el-input v-show="isEditGroupProfile" v-model="groupProfile.introduction" type="textarea" rows="3" maxlength="80" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="群公告">
              <span v-show="!isEditGroupProfile">{{ groupProfile.notification || '无' }}</span>
              <el-input v-show="isEditGroupProfile" v-model="groupProfile.notification" type="textarea" rows="4" maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="群组ID">
              {{ groupProfile.groupID }}
            </el-form-item>
            <el-form-item label="群主ID">
              <span>{{ groupProfile.ownerID }}</span>
            </el-form-item>
            <el-form-item label="群类型">
              <span>{{ groupTypeMap[groupProfile.type] }}</span>
            </el-form-item>
            <el-form-item label="加群方式">
              <span v-show="!isEditGroupProfile">
                {{ joinOptionMap[groupProfile.joinOption] }} 
                <i class="el-icon-warning-outline" :title="groupTypeTips"></i>
              </span>
              <el-radio-group v-show="isEditGroupProfile" v-model="groupProfile.joinOption" :disabled="joinOptionDisabled">
                <el-radio label="FreeAccess">自由加群</el-radio>
                <el-radio label="NeedPermission">需要验证</el-radio>
                <el-radio label="DisableApply">禁止加群</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ createDate }}</span>
            </el-form-item>
            <el-form-item label="群成员">
              <span>{{ groupProfile.memberNum + '/' +  groupProfile.maxMemberNum }}</span>
            </el-form-item>
          </div>
          <div v-show="active === activeName.GROUP_CARD">
            <el-form-item label="群昵称">
              <span v-show="!isEditGroupProfile">{{ groupProfile.selfInfo.nameCard || '无' }}</span>
              <el-input v-show="isEditGroupProfile" v-model="groupProfile.selfInfo.nameCard" maxlength="10" show-word-limit clearable></el-input>
            </el-form-item>
            <el-form-item label="群角色">
              <span>{{ roleMap[groupProfile.selfInfo.role] }}</span>
            </el-form-item>
            <el-form-item label="加群时间">
              <span>{{ joinDate }}</span>
            </el-form-item>
            <el-form-item label="禁言状态">
              <span>{{ muteUntil }}</span>
            </el-form-item>
            <el-form-item label="消息提示">
              <span v-show="!isEditGroupProfile">{{ messageRemindTypeMap[groupProfile.selfInfo.messageRemindType] }}</span>
              <el-select v-show="isEditGroupProfile" v-model="groupProfile.selfInfo.messageRemindType" size="mini" automatic-dropdown>
                <el-option label="接收消息并提示" value="AcceptAndNotify"></el-option>
                <el-option label="接收消息但不提示" value="AcceptNotNotify"></el-option>
                <el-option label="屏蔽消息" value="Discard"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div v-if="active === activeName.GROUP_MANAGEMENT">
          <GroupManagement />
        </div>
      </div>
      <div class="group-profile-info-footer">
        <div class="footer-right"> 
          <el-button v-show="showEditProfileButton" @click="isEditGroupProfile = true" type="primary">修改资料</el-button>
          <el-button v-show="showDismissGroupButton" @click="dismissGroup" type="danger">解散群组</el-button>
          <el-button v-show="showQuitGroupButton" @click="quitGroup" type="danger">退出群组</el-button>
          <el-button v-show="isEditGroupProfile" @click="handleEdit" type="primary">确认修改</el-button>
          <el-button v-show="isEditGroupProfile" @click="reset">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { getDate, getFullDate } from '../../../utils/date';
import GroupManagement from './GroupManagement.vue';

export default {
  data(){
    return {
      active:'group-profile',
      activeName: {
        GROUP_PROFILE: 'group-profile',
        GROUP_CARD: 'group-card',
        GROUP_MANAGEMENT: 'group-management'
      },
      groupTypeMap: {
        Private: '私有群',
        Public: '公开群',
        ChatRoom: '聊天室',
        AVChatRoom: '音视频聊天室',
        BChatRoom: '在线成员广播大群'
      },
      messageRemindTypeMap: {
        AcceptAndNotify: '接收消息并提示',
        AcceptNotNotify: '接收消息但不提示',
        Discard: '屏蔽消息'
      },
      joinOptionMap: {
        FreeAccess: '自由加入',
        NeedPermission: '需要验证',
        DisableApply: '禁止加群'
      },
      roleMap:{
        Owner: '群主',
        Admin: '管理员',
        Member : '群成员'
      },
      isEditGroupProfile: false,
      groupProfile:{
        groupID:'',
        name: '',
        avatar: '',
        type: '',
        introduction: '',
        notification: '',
        ownerID: '',
        createTime: 0,
        selfInfo:{
          messageRemindType: '',
          joinTime: 0,
          nameCard: '',
          role: ''
        },
        joinOption:'',
        memberNum: 0,
        maxMemberNum: 0
      },
      groupTypeTips: '私有群禁止申请加群，任何群成员都可以邀请他人入群，且无需被邀请人同意直接加入群中。\r\n聊天室和音视频聊天室自由加入，禁止邀请加群。\r\n公开群不支持邀请加群。'
    }
  },
  mounted(){
    this.reset();
  },
  watch:{
    currentGroupProfile(){
      this.reset();
    }
  },
  components:{
    GroupManagement
  },
  computed:{
    ...mapState({
      isGroupProfileInfoVisible: state => state.group.isGroupProfileInfoVisible,
      currentGroupProfile: state => state.group.currentGroupProfile,
      currentMemberList: state => state.group.currentMemberList,
      currentUserProfile: state => state.user.currentUserProfile
    }),
    isAdmin(){
      // 群主和管理员拥有成员管理和修改资料权限
      return this.groupProfile.selfInfo.role === 'Owner' || this.groupProfile.selfInfo.role === 'Admin';
    },
    isOwner(){
      // 某些权限只有群主拥有
      return this.groupProfile.selfInfo.role === 'Owner';
    },
    joinOptionDisabled() {
      // 以下群组的该属性不允许修改。私有群禁止申请加群，聊天室和音视频聊天室自由加入。
      return [
        this.TIM.TYPES.GRP_PRIVATE,
        this.TIM.TYPES.GRP_CHATROOM,
        this.TIM.TYPES.GRP_AVCHATROOM
      ].includes(this.groupProfile.type);
    },
    createDate() {
      return getDate(new Date(this.groupProfile.createTime * 1000));
    },
    joinDate() {
      return getDate(new Date(this.groupProfile.selfInfo.joinTime * 1000));
    },
    muteUntil(){
      const myGroupProfile = this.currentMemberList.filter(item => item.userID === this.currentUserProfile.userID);
      if(myGroupProfile[0].muteUntil - Date.now()/1000 > 0){
        return '禁言中，禁言到：' + getFullDate(new Date(myGroupProfile[0].muteUntil * 1000));
      } else {
        return '未禁言';
      }
    },
    showEditProfileButton(){
      if(!this.isEditGroupProfile){
        if(this.active === this.activeName.GROUP_PROFILE && this.isAdmin){
          return true;
        }
        if(this.active === this.activeName.GROUP_CARD){
          return true;
        }
      }
      return false;
    },
    showQuitGroupButton(){
      if(this.active === this.activeName.GROUP_CARD && !this.isEditGroupProfile){
        // 群主只能退出私有群，退出后没有群主
        if(this.isOwner && this.groupProfile.type !== this.TIM.TYPES.GRP_PRIVATE){
          return false;
        }
        return true;
      }
      return false;
    },
    showDismissGroupButton(){
      // 只有群主可以解散群，私有群不能解散
      if(this.active === this.activeName.GROUP_PROFILE && !this.isEditGroupProfile && this.isOwner && this.groupProfile.type !== this.TIM.TYPES.GRP_PRIVATE){
        return true;
      }
      return false;
    }
  },
  methods:{
    handleClose(){
      this.reset();
      this.active = 'group-profile';
      this.$store.commit('toggleIsGroupProfileInfoVisible', false);
    },
    handleEdit(){
      this.isEditGroupProfile = false;
      switch(this.active){
        case this.activeName.GROUP_PROFILE:
          this.updateGroupProfile();
          break;
        case this.activeName.GROUP_CARD:
          this.updateMyGroupProfile();
          break;
      }
    },
    updateGroupProfile(){
      const options = {
        groupID: this.groupProfile.groupID,
        name: this.groupProfile.name,
        avatar: this.groupProfile.avatar,
        introduction: this.groupProfile.introduction,
        notification: this.groupProfile.notification,
        joinOption: this.groupProfile.joinOption
      };
      // 判断是否有修改资料
      let isChange = false;
      for(let key in options){
        if(options[key] !== this.currentGroupProfile[key]){
          isChange = true;
          break;
        }
      }
      // 群名不能为空
      if(isChange && options.name.trim() !== ''){
        this.$store.dispatch('updateGroupProfile', options);
      }
      this.isEditGroupProfile = false;
    },
    updateMyGroupProfile(){
      if(this.groupProfile.selfInfo.nameCard !== this.currentGroupProfile.selfInfo.nameCard){
        this.$store.dispatch('setGroupMemberNameCard', { groupID: this.groupProfile.groupID , nameCard: this.groupProfile.selfInfo.nameCard});
      }
      if(this.groupProfile.selfInfo.messageRemindType !== this.currentGroupProfile.selfInfo.messageRemindType){
        this.$store.dispatch('setMessageRemindType', { groupID: this.groupProfile.groupID , messageRemindType: this.groupProfile.selfInfo.messageRemindType});
      }
      this.isEditGroupProfile = false;
    },
    quitGroup(){
      this.$store.dispatch('quitGroup', this.groupProfile.groupID);
    },
    dismissGroup(){
      this.$store.dispatch('dismissGroup', this.groupProfile.groupID);
    },
    reset(){
      // Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
      Object.assign(this, {
        isEditGroupProfile: false,
        groupProfile: {
          groupID: this.currentGroupProfile.groupID,
          name: this.currentGroupProfile.name,
          avatar: this.currentGroupProfile.avatar,
          type: this.currentGroupProfile.type,
          introduction: this.currentGroupProfile.introduction,
          notification: this.currentGroupProfile.notification,
          ownerID: this.currentGroupProfile.ownerID,
          createTime: this.currentGroupProfile.createTime,
          selfInfo:{
            messageRemindType: this.currentGroupProfile.selfInfo.messageRemindType,
            joinTime: this.currentGroupProfile.selfInfo.joinTime,
            nameCard: this.currentGroupProfile.selfInfo.nameCard,
            role: this.currentGroupProfile.selfInfo.role
          },
          joinOption: this.currentGroupProfile.joinOption,
          memberNum: this.currentGroupProfile.memberNum,
          maxMemberNum: this.currentGroupProfile.maxMemberNum
        }
      });
    }
  }
}
</script>

<style scoped>
.group-profile-info{
  position: relative;
}
.group-profile-info .el-form-item{
  margin-bottom: 5px;
}
.group-profile-info-header{
  position: absolute;
  top: 20px;
  left: 20px;
}
.group-profile-info-content{
  padding-top: 20px;
}
.group-profile-info-avatar{
  margin: 0 auto;
  padding-bottom: 22px;
  height: 128px;
  width: 128px;
}
.group-profile-info-footer{
  padding: 30px 0;
}
.footer-right{
  float: right;
}
</style>